<template>
  <div class="flower">
    <div class="nav_bar">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入鲜花名称" v-model="listQuery.flowerName" @keyup.enter.native="initFun" clearable
            @clear="init">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <template>
            <el-select v-model="listQuery.flowerStatus" placeholder="请选择售卖状态" clearable @clear="init">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" round @click="delBatch()" class="del_batch">批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" round @click="saveFlower()" class="add_flower">新增鲜花</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="expand" width="20">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="鲜花描述">
              <span>{{ props.row.flowerDescription }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>

          </el-form>
        </template>



      </el-table-column>
      <el-table-column prop="flowerName" label="名称"> </el-table-column>
      <el-table-column prop="flowerImg" label="图片">
        <template slot-scope="{ row }">
          <el-image style="width: 100px; height: 100px" :src="row.flowerImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="flowerStock" label="库存"> </el-table-column>
      <el-table-column prop="flowerStatus" label="售卖状态">
        <template slot-scope="scope">
          {{ String(scope.row.flowerStatus) === '0' ? '停售' : '启售' }}
        </template>
      </el-table-column>
      <el-table-column prop="flowerPrice" label="价格">
        <template slot-scope="scope">
          ￥{{ scope.row.flowerPrice }}
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" width="300">

        <template slot-scope="scope">
          <el-button type="warning" round @click="editClick(scope.row.flowerId)">修改</el-button>
          <el-button type="warning" round @click="delClick(scope.row.flowerId)">删除</el-button>
          <el-button type="warning" round @click="changeStatus(scope.row)"> {{ String(scope.row.flowerStatus) === '0' ? '启售' : '停售'
          }}</el-button>

        </template>

      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]" :page-size=this.listQuery.pageSize layout="total, sizes, prev, pager, next"
        :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getPage, removeFLower, batchDeleteFLower, editFlower } from '@/api/flower'
export default {
  data() {
    return {
      ids: [],
      keyword1: '',
      totalPage: undefined,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },

      currentPage: 1,
      tableData: [

      ],
      options: [{
        value: 1,
        label: '售卖中'
      }, {
        value: 0,
        label: '停售中'
      },
      ],

    };
  },
  methods: {

    initFun() {

      this.init();
    },


    handleSelectionChange(value) {
      // console.log(value);
      // 表格选项发生变化
      this.ids = []
      value.forEach(element => {
        this.ids.push(element.flowerId)
        console.log(typeof this.ids);
        console.log('ids:' + this.ids);
      });
      /* this.ids = value.map(item => item.id)
      console.log("index");
      console.log(this.ids); */

    },
    delBatch() {
      // console.log(this.tableData);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        console.log(this.ids);
        batchDeleteFLower(this.ids)
          .then((res) => {


          })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.init()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    editClick(flowerId) {
      this.$router.push({ path: '/flower/editFlower', query: { flowerId } })
    },
    delClick(flowerId) {
      console.log('222222');
      console.log(flowerId);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        removeFLower(flowerId)
          .then((res) => {
            console.log(res);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.init();
          })



      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    changeStatus(row) {
      this.$confirm('确认停售, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let statusParams = {
          flowerStatus:0,
          flowerId:row.flowerId
        }
        editFlower(statusParams).then(res=>{
          console.log(res);
          this.init();
        })
        this.$message({
          type: 'success',
          message: '停售成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    handleSizeChange(val) {

      this.listQuery.pageSize = val
      this.init()

    },
    handleCurrentChange(val) {

      this.listQuery.pageNo = val
      this.init()
    },
    init() {

      getPage(this.listQuery).then((res) => {

        this.tableData = res.data.records
        this.totalPage = res.data.total

      })
    },
    saveFlower() {
      this.$router.push({ path: '/flower/addFlower' })
    }
  },
  mounted() {
    this.init();

  },
  watch: {
    'listQuery.flowerStatus': {
      handler() {
        this.init()
      }
    }
  }
};
</script>

<style lang="scss">
.flower {

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }



  .el-table {
    .cell {
      // font-size: 20px;
      text-align: center;
    }

    .el-table-column {}



  }

  .nav_bar {

    .el-form {

      .el-form-item {
        margin-top: 30px;

        .el-input {
          margin-left: 100px;

        }

        .el-select {
          margin-left: 100px;
        }

        .del_batch {
          margin-left: 500px;
        }

        .add_flower {
          margin-left: 200px;
        }

      }


    }
  }






  .block {
    margin-top: 60px;
    margin-right: 50px;
    margin-left: 800px;
    padding-block: 50px;
  }
}
</style>
